<template>
    <el-popover placement="top" v-model="visible" :disabled="popoverDisabled">
        <div style="width:800px;" class="class-room-filter">
            <h3 v-if="title">{{title}}</h3>
            <el-form
                :inline="true"
                class="demo-form-inline"
                size="mini"
                @keyup.enter.native="queryList"
            >
                <el-row>
                    <el-col span="4">
                        <el-form-item title="校区">
                            <DictSelect
                                v-model="condition.campus"
                                label-all="校区"
                                :data="options.campusList"
                                :disabled="!!campus"
                                @change="handlerCampusChange"
                            ></DictSelect>
                        </el-form-item>
                    </el-col>
                    <el-col span="4">
                        <el-form-item title="教学楼">
                            <DictSelect
                                v-model="condition.towerCode"
                                label-all="教学楼"
                                filterable
                                :data="towerList"
                                @change="changePageNum"
                            ></DictSelect>
                        </el-form-item>
                    </el-col>
                    <el-col span="5">
                        <el-form-item title="教室类型">
                            <DictSelect
                                v-model="condition.type"
                                label-all="教室类型"
                                :data="options.roomType"
                                @change="changePageNum"
                            ></DictSelect>
                        </el-form-item>
                    </el-col>
                    <el-col span="4">
                        <el-form-item title="最小容量">
                            <!-- <el-input placeholder="最小容量" type="number" :min="capacity"  v-model="condition.gtClassNumber"></el-input> -->
                            <el-input-number
                                v-model="condition.classCapacity"
                                placeholder="最小容量"
                                controls-position="right"
                                :min="capacity||0"
                                @change="changePageNum"
                            ></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col span="4">
                        <el-form-item title="教室名">
                            <el-input
                                placeholder="教室名"
                                v-model="condition.name"
                                @change="changePageNum"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="3">
                        <el-form-item>
                            <el-button type="text" icon="el-icon-search" @click="queryList">搜索</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table :data="dataList" height="350" tooltip-effect="light">
                <el-table-column
                    :label="'教室名'"
                    min-width="120"
                    align="center"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <span :title="scope.row.name">{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="'校区'" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.campusI18n}}</template>
                </el-table-column>
                <el-table-column :label="'教学楼'" align="center" show-overflow-tooltip>
                    <span slot-scope="scope">{{scope.row.towerName}}</span>
                </el-table-column>
                <el-table-column :label="'使用部门'" align="center" show-overflow-tooltip>
                    <span
                        slot-scope="scope"
                    >{{scope.row.fixDepartmentList.map(item=>item.departmentCodeI18n).reduce((a,b)=>a+","+b)}}</span>
                </el-table-column>
                <el-table-column :label="'教室类型'" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.typeI18n}}</template>
                </el-table-column>
                <el-table-column :label="'容量'" width="60" align="center" show-overflow-tooltip>
                    <span slot-scope="scope">{{scope.row.classCapacity}}</span>
                </el-table-column>
                <el-table-column :label="'操作'" fixed="right" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button type="text" @click="select(scope.row)" size="mini">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="height:26px">
                <el-pagination
                    class="float-right"
                    small
                    layout="prev, pager, next"
                    :total="total"
                    @current-change="onCurrentPageChange"
                    :page-size="20"
                    :current-page="condition.pageNum_"
                ></el-pagination>
            </div>
        </div>
        <div slot="reference">
            <el-button size="small"
                v-if="type=='button'||type=='arrange'"
                type='primary'
                @click="handlerClick"
                :disabled="disabled"
            >教室设置<!-- {{$t('arrangement.allocateRoom')}} --></el-button>
        </div>
    </el-popover>
</template>
<script>
import { getClassroomListForArrangement, getTowerOfcamps } from "common/src/api/resource/classroom";
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import mixin from 'common/src/mixins/index';
/**
 * 老师下拉框组件
 */
export default {
    name: "GraduateClassRoomFilter",
    mixins: [mixin],
    model: {
        prop: "model",
        event: "change"
    },
    computed: {
        modelStr() {
            let model = this.model;
            if (model) {
                return `${model.name}${
                    model.towerName ? "(" + model.towerName + ")" : ""
                }`;
            } else {
                return "";
            }
        }
    },
    props: {
        popoverDisabled: {
            type: Boolean,
            default: false
        },
        showButton:{
            type: Boolean,
            default: false
        },
        model: {
            default: null,
            validator: function(value) {
                // v-model不能为null
                const valide = value !== null && value !== undefined;
                if (!valide) {
                    console.warn("v-model不能为null");
                }
                return valide;
            }
        },
        campus: {
            type: String
        },
        roomType: {
            type: String
        },
        capacity: {
            type: Number,
            default: 0
        },
        idList: {
            // 教室id list
            type: Array
        },
        occupationParam: {
          type: Object,
          default: null
        },
        classId: {
          type: Number,
          default: 0
        },
        queryType: {
            //  'include','exclude'
            default: "all",
            type: String
        },
        queryTypeModifiable: {
            // 查询类型是否可修改
            type: Boolean,
            default: true
        },
        type: {
            // 当前选择框形式 默认是input模式 也可以使用button模式
            default: "input",
            type: String
        },
        tbd: {
            // 待定
            default: false,
            type: Boolean
        },
        tbdLabel: {
            type: String
        },
        title: {
            type: String
        },
        disabled: {
            type: Boolean,
            default: false
        },
        addGruadateFaculty: {
            type: Array,
            default: []
        },
        //教室用途
        usageCode: {
            type: String,
            default: ""
        }
        // clearable:{ // 暂不使用 未解决点击input清除弹出popover的问题
        //   default: false,
        //   type: Number
        // }
    },
    data() {
        return {
            dataList: [],
            towerList: [],
            options: {
                campusList: [],
                roomType: [],
                facultys: []
            },
            condition: {
                campus: "",
                type: "",
                classCapacity: "",
                tower: "",
                isClass: "1",
                pageNum_: 1,
                pageSize_: 20,
                classId: null,
                occupationParam: {}
            },
            towerCondition: {
                campus: "", // 校区code
                type: 0 //固定值
            },
            visible: false,
            total: 0,
            queryTypeVal: "all"
        };
    },
    mounted() {
        this.init();
    },
    watch: {
        idList() {
            // this.queryList();
        },
        occupationParam() {
          this.queryList()
        },
        campus(val) {
            this.condition.campus = val;
            this.handlerCampusChange(val);
        },
        roomType(val) {
            this.condition.roomType = val;
        },
        capacity(val) {
            this.condition.classCapacity = val;
        }
    },
    methods: {
        init() {
            this.condition.campus = this.campus;
            this.condition.roomType = this.roomType;
            this.condition.classCapacity =
                this.capacity > 0 ? this.capacity : null;
            this.queryTypeVal = this.queryType;
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: [
                    "X_XQ", // 校区
                    "X_JSLX", // 教室类型
                    "X_YX"
                ]
            };
            this.handlerCampusChange(this.campus);
            queryDic(data).then(res => {
                UTILS.fillSelect(
                    {
                        campusList: "X_XQ",
                        roomType: "X_JSLX", // 教室类型
                        facultys: "X_YX"
                    },
                    res.data,
                    this.options
                );
                //如果传入了教室用途，则新加参数
                if (this.usageCode) {
                    let classroomUsageList = [{ usageCode: this.usageCode }];
                    this.condition.classroomUsageList = classroomUsageList;
                }
                //获取数据分权的学院
                let facultyList = this.options.facultys.map(item => {
                    return { departmentCode: item.value };
                });
                //如果传了需要添加研究生院的教室
                // if (this.addGruadateFaculty) {
                //     let role = this.global.currentUser.innerRoles;
                //     if (role.includes("2")) {
                //         facultyList.push({ departmentCode: "000014" });
                //     }
                // }
                if (
                    this.addGruadateFaculty &&
                    this.addGruadateFaculty.length > 0
                ) {
                    this.addGruadateFaculty.map(item => {
                        facultyList.push({ departmentCode: item });
                    });
                }
                this.condition.fixDepartmentList = facultyList;
                this.queryList();
            });
        },
        handlerClick() {
            this.visible = !this.visible;
            this.$emit("click");
        },
        select(roomData) {
            this.model = roomData;
            this.visible = false;
            this.$emit("change", roomData);
        },
        changePageNum() {
            this.condition.pageNum_ = 1;
        },
        queryList() {
            const condition = { ...this.condition };

            if (this.occupationParam == null || this.occupationParam.calendarId == null) {
              return
            }

            condition.occupationParam = this.occupationParam
            condition.classId = this.classId
            // if (this.queryTypeVal == "include") {
            //     // include模式
            //     if (this.idList.length > 0) condition.includeIds = this.idList;
            //     else {
            //         condition.includeIds = [-1];
            //     }
            // } else if (this.queryTypeVal == "exclude") {
            //     condition.excludeIds = this.idList;
            // }

            getClassroomListForArrangement(condition).then(res => {
                this.dataList = res.data.list;
                this.total = res.data.total_;
            });
        },
        onCurrentPageChange(currentPage) {
            this.condition.pageNum_ = currentPage;
            this.queryList();
        },
        handlerCampusChange(val) {
            if (val) {
                this.towerCondition.campus = val;
                getTowerOfcamps(this.towerCondition).then(res => {
                    this.towerList = res.data.map(tower => {
                        return {
                            value: tower.code,
                            label: tower.name
                        };
                    });
                });
            } else {
                this.towerList = [];
                this.condition.towerCode = "";
            }
        }
    }
};
</script>

<style lang="scss">
.class-room-filter {
    .el-col {
        height: 40px;
    }
    .el-form-item {
        width: 100%;
        .el-form-item__content {
            width: 95%;
        }
    }
    .select-input {
        input {
            cursor: pointer;
        }
    }
}
</style>
